<template>
	<view class="login">
		<view class="title">
			<view class="login-close" @click="goBack">
				<uni-icons type="back" size="30"></uni-icons>
			</view>	
		</view>
		<view class="title-text">
			<p>注册</p>
		</view>
		<view class="login-content" @click="showUser = false">
			<view class="dropdown" style="position:absolute;top:155rpx;left:90rpx;z-index: 10000;"
				v-if="showUser && JSON.parse(JSON.stringify(users)).length > 0">	          
				<view class="dropdown-item" hover-class="active-item" v-for="(item,index) in users" :key="index">
					<u-icon name="lock-open" style="color: #FFF" size="36rpx" @click="chooseUser(item)"></u-icon>
					<view class="u-m-l-20">
						<u-input v-model="item.username" type="text" height="30" :disabled="true"
							@click="chooseUser(item)" :custom-style="{'color': '#f1f1f1'}"></u-input>
						<u-input v-model="item.password" type="password" height="30" :disabled="true"
							:password-icon="false" @click="chooseUser(item)"
							:custom-style="{'color': '#f1f1f1','margin-left': '-10rpx'}"></u-input>
					</view>
				</view>
			</view>
			<view class="login-form">
				<u-form class="login-form_content" :model="form" ref="form" :error-type="['toast']">
					<u-form-item class="login-form_item" prop="login_id" left-icon="email" :left-icon-style="iconStyle">
						<u-input v-model="form.login_id" :placeholder="$t('mine.input_email')"
							@focus="showUser = true" />
					</u-form-item>
					<u-form-item class="login-form_item" prop="password" left-icon="lock" :left-icon-style="iconStyle">
						<u-input v-model="form.password" type="password" :placeholder="$t('mine.input_pwd')" />
					</u-form-item>
				</u-form>
			</view>
			<view class="login-button" @click="submit">
					<p class="login-button_p">注册</p>
			</view>
		</view>
		<u-popup  v-model="show" mode="center" height="373rpx" width="624rpx">
			<view class="popup-top">
				<view class = "popup-top_icon">
						<u-icon name="info-circle" style="margin: 0 auto;" height="66rpx" width="66rpx"  size="66rpx"></u-icon>
				</view>
				<p class="popup-top_p">该账号也被注册，请重新输入新的账号</p>
			</view>
			<view class="popup-buttom" @click="show=false">
				确定
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import pageMixin from '@/utils/pageMixin';
	import {
		Base64
	} from 'js-base64';
	import {
		db
	} from '@/utils/sqlite';
	import sqliteSQL from "@/utils/sqliteSQL";
	import store from '@/store/index.js';
	import i18n from '../../lang/index'

	export default {
  // mixins: [pageMixin],
		data() {
			return {
				form: {
					email: '',
					password: '',
					isAgree: false
				},
				iconStyle: {
					fontSize: '38rpx',
					color: '#646466',
					display: 'flex'
				},
				rules: {
					email: [{
						required: true,
						message: this.$t('mine.msg_email'),
						type: 'email'
					}],
					password: [{
						required: true,
						min: 6,
						max: 18,
						message: this.$t('mine.msg_pwd'),
					}],
					isAgree: [{
						required: true,
						message: this.$t('mine.msg_protocol'),
						type: 'boolean',
						transform(value) {
							return value || '';
						}
					}]
				}
			}
		},

		onLoad(options) {},
		onShow() {},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		components: {},
		computed: {
			i18n () {
				return this.$t('mine')  
			}
		},
		methods: {
			goBack() {
				let pages = getCurrentPages();
				if (pages.length > 1) {
					this.$u.route({
						type: 'back',
						delta: 1
					})
				} else {
					this.$u.route({
						type: 'tab',
						url: '/pages/home/index'
					})
				}
			},
			goLogin() {
				let pages = getCurrentPages();
				if (pages.length > 1 && pages[pages.length - 2].route == 'pages/login/index') {
					this.goBack();
				} else {
					this.$goPage('/login');
				}
			},
			submit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						let data = {
							Email: this.form.email,
							Password: this.form.password
						};
						this.$http.post('/client/auth/account/register', data, store.state.jHeader).then(res => {
							uni.showToast({
								title: this.$t('mine.regiester_success'),
							});
							setTimeout(() => {
								this.removeForm();
								this.goLogin();
							}, 1000);
						});
					} else {
						console.log('验证失败');
					}
				});
			},
			removeForm() {
				this.form.email = '';
				this.form.password = '';
				this.form.isAgree = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		background-color: #FEFEFE;
		height: 1624rpx;
		width: 100%;
		border-top: 1rpx solid #fff;
	}
	.title{
		display: flex;
		text-align: center;
		vertical-align: middle;
		width: 100%;
		height: 88rpx;
		margin-top: 88rpx;
		.login-close {
			width: 48rpx;
			height: 48rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// margin-top: 110rpx;
			margin-left: 48rpx;
			.icon {
				font-size: 42rpx;
				color: #000000;
			}
		}
	}
	.title-text{
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		margin-top: 120rpx;
		p{	
			margin:0 auto;
			width: 128rpx;
			height: 90rpx;
			font-size: 64rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			-webkit-background-clip: text;
		}
	}
	.login-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.login-bg_img {
			width: 100%;
			height: 100%;
			// padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: env(safe-area-inset-bottom);  
		}
	}


	.login-title {
		font-size: 48rpx;
		font-family: 'Source Han Sans CN';
		font-weight: bold;
		color: #ffffff;
		padding: 0 48rpx;
		position: absolute;
		top: 220rpx;
		left: 0;
	}

	.login-content {
		position: absolute;
		left: 50%;
		top: 380rpx;
		margin-top: 80rpx;
		transform: translateX(-50%);
	}

	.dropdown {
		background-color: #303030;
		width: 490rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;

		.dropdown-item {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
		}

		.active-item {
			background-color: #4c4d4e;
			opacity: 0.6;
			cursor: pointer;
		}
	}

	.login-form {
		border-radius: 20rpx;
		background-color: #ffffff;
		margin: 0 auto;
		padding: 38rpx;

		&_content {
			padding: 24rpx 0;
		}

		&_item {
			margin: 0 auto;
			width: 622rpx;
			height: 112rpx;
			margin-top: 10rpx;
			border-radius: 10rpx;
			background: #000000;
			background-color: rgba(0, 0, 0, 0.03);
		}
	}

	.login-button {
		display: flex;
		width: 622rpx;
		height: 96rpx;
		background: #476BEE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 0.5;
		align-items: center;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		&_p{
			margin: 0 auto;
			height: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FEFEFE;
		}
	}
	.link{
		margin: 22rpx auto;
		width: 128rpx;
		height: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #476BEE;
		line-height: 40rpx;
		-webkit-background-clip: text;
	}
	.popup-top{
		width: 100%;
		height: 181rpx;
		&_icon{
			margin: 0 auto;
			width: 100%;
			height: 136rpx;
			display: flex;
			u-icon{
				margin: 0 auto;
			}
		}
		&_p{
			width: 512rpx;
			height: 45rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 38rpx;
			margin: 0 auto;
			-webkit-background-clip: text;
		}
	}
	.popup-buttom{
		margin: 48rpx auto;
		width: 496rpx;
		height: 96rpx;
		background: #476BEE;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 96rpx;
		text-align: center;
		vertical-align: middle;
		color: #fff;
	}
	.login-tips {
		font-size: 28rpx;

		&_left {
			color: #999999;

			&--text {
				color: $u-type-primary;
				text-decoration: underline;
			}
		}
	}
</style>
